<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">
			<Col class="pr-1" span="5">
			<Input :class="'w-100'" v-model="searchKey.clientName" placeholder="请输入客户名" clearable />
			</Col>
			<Col class="pr-1" span="5">
			<Select :class="'w-100'" v-model="searchKey.statu" placeholder="请选择申请状态" clearable>
				<Option v-for="(item, index) in status" :value="item.value" :key="index">{{ item.label }}</Option>
			</Select>
			</Col>
			<Button class="float-right" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="amount">
					<span class="text-danger">￥{{util.parseMoney(row.amount / 100, 2)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.backId)">详细</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: {
					clientName: "",
					storeId: "",
					statu: "",
				},
				stores: [],
				status: [{
						value: 'REQ',
						label: '已申请'
					},
					{
						value: 'REJ',
						label: '已驳回'
					},
					{
						value: 'BCK',
						label: '已退还'
					},
				],
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "退押申请编号",
							key: "backId",
							width: 150
						},
						{
							title: "客户名",
							key: "clientName",
							width: 130
						},
						{
							title: "金额",
							slot: "amount",
							width: 100
						},
						{
							title: "门店",
							key: "name",
						},
						{
							title: "申请状态",
							key: "statu",
							render(h, params) {
								let flag;
								if (params.row.statu == 'REQ') {
									flag = "已申请";
								} else if (params.row.statu == 'REJ') {
									flag = "已驳回";
								} else if (params.row.statu == 'BCK') {
									flag = "已退还";
								}
								return h('span', flag)
							},
							width: 110
						},
					],
					data: []
				}

			};
		},
		methods: {
			search: function() {
				this.tableInfo.currentPage = 1;
				this.loadData();
			},
			show: function(backId) {
				this.$router.push({
					name: "depositBackRequest_detail",
					params: {
						backId
					}
				});
			},
			loadData: function() {
				this.http.get({
					url: "/client/deposit-back-request/page",
					param: {
						currentPage: this.tableInfo.currentPage,
						pageSize: this.tableInfo.pageSize,
						clientName: this.searchKey.clientName,
						statu: this.searchKey.statu,
						storeId: this.storeId,
					}
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.loadData();
			},
		},
		created: function() {
			this.storeId = this.store.state.currentUser.store.storeId;
			this.search();
		},
	}
</script>

<style>
</style>
